<template>
  <view class="main_ordinary">
    <nut-form>
      <nut-form-item label="抬头类型" prop="headType">
        <nut-radio-group direction="horizontal" v-model="formData.headType">
          <nut-radio label="1">个人</nut-radio>
          <nut-radio label="2">企业</nut-radio>
        </nut-radio-group>
      </nut-form-item>
      <nut-form-item label="发票抬头" prop="title" required>
        <nut-input
          v-model="formData.headTile"
          class="nut-input-text"
          placeholder="请填写您的发票抬头"
          type="text"
          :border="false"
        />
      </nut-form-item>

      <nut-form-item
        label="税号"
        prop="title"
        required
        v-if="formData.headType == 2"
      >
        <nut-input
          v-model="formData.taxNumber"
          class="nut-input-text"
          placeholder="请填写纳税人识别号或社会征信代码"
          type="text"
        />
      </nut-form-item>
      <nut-form-item
        label="开户银行"
        prop="title"
        v-if="formData.headType == 2"
      >
        <view @click="chooseBank" class="chooseBank" v-if="formData.account">{{ formData.account }}</view>
        <view @click="chooseBank" class="chooseBank blank" v-else>请选择开户行</view>
      </nut-form-item>
      <nut-form-item
        label="银行账号"
        prop="title"
        v-if="formData.headType == 2"
      >
        <nut-input
          v-model="formData.accountNo"
          class="nut-input-text"
          placeholder="请输入银行账号（选填）"
          type="text"
        />
      </nut-form-item>
      <nut-form-item
        label="企业地址"
        prop="title"
        v-if="formData.headType == 2"
      >
        <nut-input
          v-model="formData.sendAdd"
          class="nut-input-text"
          placeholder="请输入企业地址（选填）"
          type="text"
        />
      </nut-form-item>
      <nut-form-item
        label="企业电话"
        prop="title"
        v-if="formData.headType == 2"
      >
        <nut-input
          v-model="formData.phone"
          class="nut-input-text"
          placeholder="请输入企业电话（选填）"
          type="text"
        />
      </nut-form-item>

      <nut-form-item>
        <view class="persionBot">
          <!-- <nut-radio label="1" v-model="choosed">设为默认抬头</nut-radio> -->
          <nut-checkbox v-model="formData.default">设为默认抬头</nut-checkbox>
          <view class="operateBox" @click="clearForm">
            <image class="img" src="../../assets/images/index/icon_clean.png"></image>
            <text>清空当前</text>
          </view>
        </view>
      </nut-form-item>
      <view class="bottomBox">
        <view class="botBtn" @click="gotoAddSpecial">确定</view>
      </view>
    </nut-form>
  </view>
</template>
<script lang="ts" setup>
import { computed, onMounted, ref, watch } from "vue";
import { Search2, Del2, Edit } from "@nutui/icons-vue-taro";
import { $get, $post, $put } from "@/@api/index";
import useInvoicingStore from "../../store/invoicing";
import useUserInfoStore from "../../store/user";
import Taro, {useDidShow} from "@tarojs/taro";
const userStore = useUserInfoStore();
const invoicingStore = useInvoicingStore();
const formData = ref<any>({});
init();
//初始化（判断新增还是编辑）
function init() {
  if (invoicingStore.editTitle) {
    console.log("编辑");

    formData.value = invoicingStore.editTitle;
  } else {
    console.log("新增");

    formData.value = {
      sendType: "1", //默认寄递方式 1、现场领取 2、邮寄 3、电子邮箱  2023/08/04后端说默认先传1，之前是2
      billType: "1", //发票类型/普票
      headType: "1", //1个人 2企业
      headTile: "", //发票抬头
      default: false,
      taxNumber: "", //税号
      account: "", //开户行
      accountNo: "", //银行账号
      sendAdd: "", //企业地址/寄送地址
      phone: "", //企业电话
      longitude: '',//经度
      latitude: '',//纬度
    };
  }
  formData.value.customerCode = userStore.userInfo.customerCode;
}
//清除
function clearForm() {
  formData.value = {
    sendType: "1", //默认寄递方式 1、现场领取 2、邮寄 3、电子邮箱
    billType: "1", //发票类型/普票
    headType: "1", //1个人 2企业
    headTile: "", //发票抬头
    default: false,
    taxNumber: "", //税号
    account: "", //开户行
    accountNo: "", //银行账号
    sendAdd: "", //企业地址/寄送地址
    phone: "", //企业电话
    longitude: '',//经度
    latitude: '',//纬度
  };
}
//提交按钮
function gotoAddSpecial() {
  if(!formData.value.headTile)
  {
    return Taro.showToast({
      icon: 'none',
      title: '请填写发票抬头'
    })
  }
  if(formData.value.headType=='2' && !formData.value.taxNumber)
  {
    return Taro.showToast({
      icon: 'none',
      title: '请填写纳税人识别号或社会征信代码'
    })
  }
  if (invoicingStore.editTitle) {
    if (formData.value.default) {
      formData.value.isDefault = "1";
    } else {
      formData.value.isDefault = "0";
    }
    $put("/selfmachine-system/invoice/update", formData.value).then(
      (res: any) => {
        if (res.data.code == 200) {
          Taro.showToast({
            icon: "success",
            title: "修改成功",
          });
          Taro.redirectTo({
            url: "/pages/invoicing/myTitle?billType=1",
          });
        } else {
          Taro.showToast({
            icon: "error",
            title: "修改失败",
          });
        }
      }
    );
  } else {
    if (formData.value.default) {
      formData.value.isDefault = "1";
    } else {
      formData.value.isDefault = "0";
    }
    $post("/selfmachine-system/invoice/add", formData.value).then(
      (res: any) => {
        if (res.data.code == 200) {
          Taro.showToast({
            icon: "success",
            title: "新增成功",
          });
          Taro.redirectTo({
            url: "/pages/invoicing/myTitle?billType=1",
          });
        } else {
          Taro.showToast({
            icon: "error",
            title: "新增失败",
          });
        }
      }
    );
  }
}
// 选择开户行
const chooseBank = ()=>{
  Taro.navigateTo({
    url: "/pages/myBankAccount/bank",
  });
}
useDidShow(()=>{
  let pages = Taro.getCurrentPages();
  let currPage = pages[pages.length - 1]
  if (currPage.__data__.khName) {
    formData.value.account = currPage.__data__.khName
  }
})
</script>
<style lang="scss">
.main_ordinary {
  height: 100%;
  background: #f5f5f5;
  padding: 24rpx;
  box-sizing: border-box;
  .nut-cell-group__warp {
    margin: 0;
  }
}
.persionBot {
  display: flex;
  justify-content: space-between;
  //   height: 80rpx;
  background: #ffffff;
  //   padding: 0 20rpx;
  .nut-checkbox__label {
    color: #666;
  }
  .operateBox {
    color: #666666;
    line-height: 80rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    text {
      margin-left: 12rpx;
      font-size: 24rpx;
      color: #666;
    }
    .img {
      width: 32rpx;
      height: 32rpx;
    }
    .botIcon {
      margin-top: 20rpx;
    }
  }
}
.bottomBox {
  background: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  height: 128rpx;
  width: 750rpx;
  border-top: 1rpx solid #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2500;
  .botBtn {
    width: 700rpx;
    height: 88rpx;
    border-radius: 44rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #0966ff;
    color: #fff;
    font-size: 32rpx;
  }
}
.chooseBank {
  padding-left: 10rpx;
  color: #252525;
  &.blank {
    color: #777;
  }
}
</style>
